<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index1.css">
		<link rel="stylesheet" href="css/reset.css">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="root">
			<div class="ground">
				<img src="images/tuolaji.png" alt="">
			</div>
			<div class="wheel1">
				<img src="images/wheel1.gif" alt="">
			</div>
			<div class="wheel2">
				<img src="images/wheel2.gif" alt="">
			</div>
			<div class="bottom_img">
				<img src="images/jiantou.gif" alt="">
			</div>
			<div class="img_4">
				<audio style="display:none; height: 0" id="bg-music" preload="auto" src="bgm.mp3" loop="loop"></audio>
				<img src="images/yinyue.gif" alt="">
			</div>
			<div class="ps">
				<p>随着农业技术的发展</p>
				<p>本应成为主食的五谷杂粮</p>
				<p>却渐渐被快餐零食所替代</p>
				<p>人们的健康水平</p>
				<p>也在餐饮条件的变化下</p>
				<p>变得参差不齐</p>
			</div>
		</div>
		
		
		<script>
			document.ontouchstart = function(evt){
				var touch = evt.targetTouches[0];
				var x = touch.pageX;
				var y = touch.pageY;
				// console.log(x,y)
				var obj;
				document.ontouchmove = function(e){
					var touch1 = e.targetTouches[0];
					var x1 = touch1.pageX;
					var y1 = touch1.pageY;
					// console.log(x1,y1)
					obj = y1-y;
					console.log(obj)
				}
				document.ontouchend = function(){
					document.ontouchmove = null;
					if(obj <= -200){
						location.href='index2.html';
					}
				}
			}
			
			
			
			
			//音乐自动播放
			window.onload=function(){
				autoPlayMusic();
				audioAutoPlay();
			}
			function audioAutoPlay() {
				var audio = document.getElementById('bg-music');
				audio.play();
			}
			// 音乐播放
			function autoPlayMusic() {
				// 自动播放音乐效果，解决浏览器或者APP自动播放问题
				function musicInBrowserHandler() {
					musicPlay(true);
					document.body.removeEventListener('touchstart', musicInBrowserHandler);
				}
				document.body.addEventListener('touchstart', musicInBrowserHandler);
				
			function musicPlay(isPlay) {
				var media = document.querySelector('#bg-music');
				if (isPlay && media.paused) {
					media.play();
				}
				if (!isPlay && !media.paused) {
					media.pause();
				}
			}
			}
		</script>
	</body>
</html>
